<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-03 21:46:21
 * @LastEditTime: 2019-10-06 15:10:59
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="@/examples/assets/img/sp1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="@/examples/assets/img/sp2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="@/examples/assets/img/sp3.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  name: "Swiper",
  data() {
    return {};
  },
  mounted: function() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true, //可选选项，自动滑动
      loop: true, //循环播放
      // effect : 'flip',
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }
};
</script>
<style lang="scss" scoped>
@import url("../../../../../node_modules/swiper/dist/css/swiper.css");
.swiper-slide {
  display: flex;
  width: 100%;
  height: 250px;
  background-color: rgb(209, 209, 209);
  justify-content: center;
  align-items: center;
}
</style>
